<template>
	<view class="container">		
		<noempty v-if="list.length == 0"></noempty>
		<view class="m-30" v-else>
			<view class="uni-flex justify-space-between m-b20 bg-white p-20" v-for="item in list" @click="goPage(item.code)">
				<view class="article_image round-10 overflow_h">
					<image class="article_img" :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="article_info text-gray3 w-70">
					<view class="article_title fs14 fw600">{{ item.title }}</view>
					<view class="article_icons uni-flex justify-space-between">
						<view class="uni-flex justify-left fs12">
							<uni-icons type="eye" color="#666" size="18"></uni-icons>
							<text class="m-l10 text-gray6">{{ item.view_num }}</text>
						</view>
						<view class="text-gray6">{{ getDate(item.create_time) }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { articleList } from "@/api/article.js"
let that;
export default {
	data() {
		return {
			code: "",		//文章分类code
			pages: {
				page: 1,
				size: 10,
				loading: true
			},
			list: [],	
		}
	},
	onLoad(e){
		that = this
		that.code = e.code ? e.code : ""
		if(that.code){
			that.getList()
		}
	},
	onReachBottom(e){
		this.pages.page++
		this.getList()
	},
	methods: {		
		getDate(date) {
			return date.split(" ")[0]
		},
		/**
		 * 根据分类获取文章列表
		 */
		getList() {
			if(!that.pages.loading) return
			that.pages.loading = false
			articleList({
				page: that.pages.page,
				size: that.pages.size,
				order: "sort asc",
				condition: {
					state: 1,
					cate_code: that.code
				}				
			}).then(res => {				
				that.pages.loading = true
				let data = res.data
				let list = [];
				if(that.pages.page == 1) list = data.list;
				else list = [...that.list, ...data.list];
				that.list = list; 
				
				if(that.list.length > 0 && that.pages.page == 1) {
					uni.setNavigationBarTitle({
						title: that.list[0]['cate']['title']
					})
				}
			})
		},
		goPage(code) {
			uni.navigateTo({
				url: `/pages/article/info?code=${code}`
			})
		}
	},
}
</script>

<style>
</style>